import React, { Component, useRef } from 'react'
import '../style/style.less'
import { getDateTime3 } from '@/utils/getDate'
import { SearchOutlined } from "@ant-design/icons";
import _ from 'lodash'
import { Form, Input, Select, DatePicker, Space, Button } from 'antd'
import TheTable from '@/components/TheTable'
import ThePagination from '@/components/ThePagination'
import TheButton from '@/components/TheButton'
import { apiShopBillPage } from '@/request/financial'

const { RangePicker } = DatePicker

const SearchHeader = ({ getValue }) => {
  const formRef = useRef()
  const options = [
    {
      label: '待商家对账',
      value: 'OUT'
    },
    {
      label: '待平台结算',
      value: 'CHECK'
    },
    {
      label: '已完成',
      value: 'PAY'
    }
  ]
  const onFinish = (values) => {
    if (values.time && values.time.length) {
      values.startTime = getDateTime3(values.time[0]) + ' 00:00:00'
      values.endTime = getDateTime3(values.time[1]) + ' 23:59:59'
    }
    delete (values.time)
    _.forIn(values, (v, k) => {
      if (!v) {
        delete (values[k])
      }
    })
    getValue(values)
  }
  const reset = () => {
    formRef.current.setFieldsValue({
      sn: '',
      billStatus: null,
      time: []
    })
    getValue({})
  };
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
      <Form layout={'inline'} ref={formRef} onFinish={onFinish}>
        <Form.Item name={"sn"}>
          <Input style={{ width: 140 }} suffix={<SearchOutlined />} placeholder={"账单编号"} />
        </Form.Item>
        <Form.Item name={"billStatus"} label="状态">
          <Select allowClear
            style={{ width: 140 }}
            options={options}
            placeholder={"状态"}
          />
        </Form.Item>
        <Form.Item name={"time"} label="生成日期">
          <RangePicker />
        </Form.Item>
        <Form.Item>
          <Space size="small" style={{ marginLeft: 10 }}>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button onClick={reset}>重置</Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
};

export default class List extends Component {
  state = {
    columns: [
      {
        title: '账单号',
        dataIndex: 'sn',
        key: 'sn'
      },
      {
        title: '生成时间',
        dataIndex: 'createTime',
        key: 'createTime'
      },
      {
        title: '出账时间段',
        render: (text, record) => {
          return `${record.startTime} 至 ${record.endTime}`
        }
      },
      {
        title: '门店名称',
        dataIndex: 'storeName',
        key: 'storeName'
      },
      {
        title: '状态',
        dataIndex: 'billStatus',
        key: 'billStatus',
        render: (text, record) => {
          let label = ''
          switch (record.billStatus) {
            case 'OUT':
              label = '待商家对账'
              break;
            case 'CHECK':
              label = '待平台结算'
              break;
            case 'PAY':
              label = '已完成'
              break;
          }
          return label;
        }
      },
      {
        title: '操作',
        fixed: 'right',
        render: (text, record) => {
          return <TheButton hasPermi={['financial:mallList:detail']} onClick={() => this.props.history.push(`/financial/mallDetails/${record.id}/${record.storeId}`)}>详情</TheButton>
        }
      }
    ],
    dataSource: [],
    pageData: {
      pageNo: 1,
      pageSize: 10
    },
    total: 0,
    searchValue: {}
  }
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    const { pageData, searchValue } = this.state
    let res = await apiShopBillPage({ ...pageData, ...searchValue })
    if (res.data && res.code === 0) {
      this.setState({
        dataSource: res.data,
        pageData: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        total: res.totalCount
      })
    }
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({ pageData: { pageNo, pageSize } }, () => this.getData())
  }
  getValue = value => {
    this.setState({ searchValue: value, pageData: { pageNo: 1, pageSize: 10 } }, () => this.getData())
  }
  render() {
    const { columns, dataSource, pageData: { pageNo, pageSize }, total } = this.state
    return (
      <div className='p-layout-box'>
        <SearchHeader getValue={this.getValue} />
        <div className='p-layout-content-pagination'>
          <TheTable columns={columns} dataSource={dataSource} scroll={{ x: 'max-content', y: 500 }} />
          <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
        </div>
      </div>
    )
  }
}
